.ext-title{
	font-size: 42px ;
	text-align: center;
	color: #071D3C;
	position: relative;
	line-height: 1.6;
	&::after{
		content: '';
		display: block;
		width: 58px;
		height: 6px;
		background-color: #2FCEFF;
		position: absolute;
		bottom: 0;
		left:calc((100% - 58px) / 2) ;
	}
}

.service{
	padding: 80px 0;
	.seritem{
		margin-top: 60px;
	}
	.ser-list{
		flex: 1;
		display: flex;
		align-items: center;
		padding: 0 30px;
		background: linear-gradient(354deg, #FFFFFF 0%, #FDFFFF 0%, #EDFBFF 100%, #EDFBFF 100%);
		box-shadow: 5px 10px 20px 0px rgba(7, 29, 60, 0.08);
		border-radius: 8px;
		min-height: 160px;
		img{
			margin-right: 20px;
			transition: all 0.3s ease-in 10ms;
		}
		span{
			font-size: 24px;
			color: #071D3C;
		}
		p{
			margin-top: 12px;
			font-size: 14px ;
			color: #69778A;
			line-height: 1.6;
		}
	}
	.ser-list:hover{
		img{
			transform: rotateY(180deg)
		}
	}
	.ser-list:nth-child(2){
		margin: 0 30px;
	}
}


.battle{
	height: 450px;
	position: relative;
	&::after{
		content: '';
		display: block;
		width: 58%;
		height:100%;
		background-color: #000;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.ext-title{
		margin-top: 30px;
		text-align: left;
		&::after{
			left:0;
		}
	}
	.bat-right{
		position: absolute;
		top: 120px;
		right: 0;
		z-index: 999;
		width:1360px;
		overflow: hidden;
	}
	.el-carousel{
		// overflow: visible;
		padding-left: 20px;
		.el-carousel__container{
			left: 120px;
		}
	}
	.el-carousel__item{
		width: 420px;
		height: 200px;
		background: url(../img/pic/ext_5.svg) no-repeat center / 100% 100%;
		margin-right: 20px;
		padding: 20px;
		img{
			transition: all 0.3s ease-in 10ms;
		}
		span{
			color: #071D3C;
			font-size: 24px;
			margin-left: 10px;
		}
		p{
			color: #69778A;
			font-size: 16px;
			line-height: 1.6;
			margin-top: 10px;
		}
	}
	.el-carousel__item:hover{
		img{
			transform: rotateY(180deg)
		}
	}
	.el-carousel__arrow{
		opacity: 0.7;
		left: 0;
		width: 30px;
		height: 30px;
		transition: all 0.3s ease-in 10ms;
		i{
			display: none;
		}
	}
	.el-carousel__arrow:hover{
		opacity: 1;
	}
	.el-carousel__arrow--left{
		top: 230px;
		background: url(../img/icon/icon_left.png) no-repeat center / 100% 100%;
	}
	.el-carousel__arrow--right{
		top: 270px;
		background: url(../img/icon/icon_right.png) no-repeat center / 100% 100%;
	}
	.el-carousel__indicators{
		display: none;
	}
}

.introduce{
	padding: 40px 0;
	.int-img{
		width: 50%;
	}
	.int-cont{
		margin-top: 20px;
		margin-left: 20px;
		p{
			font-size: 16px;
			color: #69778A;
			line-height: 1.8;
			margin-top: 30px;
		}
	}
}

.technology{
	padding: 100px 0;
	background: linear-gradient(360deg, rgba(234, 239, 249, 0.4) 0%, rgba(203, 217, 246, 0) 100%);
	background-image: url(../img/pic/ext_12.svg) no-repeat;
	
	// background-size: 100% 100%;
	background-position: left bottom 0;
	.tec-left{
		flex: 1;
		margin-top: 50px;
		.ext-title{
			margin-top: 0px;
			text-align: left;
			&::after{
				left:0;
			}
		}
		p{
			width: 60%;
			font-size: 16px;
			color: #69778A;
			line-height: 1.8;
			margin-top: 30px;
		}
	}
	.tec-right{
		flex: 1;
		height: 430px;
		position: relative;
		.tec-right-item{
			position: absolute;
			width: 84%;
			height: 240px;
			display: flex;
			img{
				width: 70px;
				transition: all 0.3s ease-in 10ms;
				margin-right: 20px;
			}
			span{
				color: #ffffff;
				font-size: 24px;
			}
			p{
				color: #ffffff;
				font-size: 14px;
				line-height: 1.6;
				margin-top: 10px;
			}
		}
		
		.tec-right-item:hover{
			img{
				transform: rotateY(180deg)
			}
		}
		.tec-right-item1{
			left: 0;
			top: 0;
			background: #49D5FF url(../img/pic/ext_tec_bg.png) no-repeat;
			background-position: right bottom 14px;
			padding: 20px 30px 20px 20px;
		    z-index: 9;
		}
		.tec-right-item2{
			z-index: 8;
			bottom: 0;
			right: 0;
			background: #14192A url(../img/pic/ext_tec_bg.png) no-repeat;
			background-position: right bottom 14px;
			padding: 70px 40px 20px 20px;
		}
		
	}
}

.core-top{
	padding-top: 50px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #D1DBEF 100%);
}
.core-tab{
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.tab-list{
		margin: 20px 50px;
		text-align: center;
		color: #69778A;
		font-size: 14px;
		position: relative;	
		transition: all 0.3s ease-in 10ms;
		cursor: pointer;
		.core-img{
			width: 70px;
			height: 70px;
			background: linear-gradient(180deg, #E2E8F6 0%, rgba(202, 215, 241, 0) 100%);
			box-shadow: 0px 2px 20px 0px rgba(123, 146, 190, 0.15);
			border-radius: 30px;
			border: 3px solid #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10px;
		}
	}
	.tab-active{
		.core-img{
			background: linear-gradient(180deg, #2FCEFF 0%, #00B0E6 100%);
			box-shadow: 0px 2px 20px 0px rgba(0, 139, 182, 0.3), inset 0px 4px 10px 0px #07B0E4;
		}
		&::after{
			content: '';
			display: block;
			width: 0px;
			height: 0px;
			border: 10px solid transparent;
			border-bottom: 10px solid #14192A;
			position: absolute;
			bottom: -20px;
			left: 25px;
		}
	}
}
.bottom-core{
	background: url(../img/pic/core_bg.png) no-repeat center / 100% 100%;
	background-size: cover;
	padding: 30px 0;
	.cont{
		width: 33%;
		margin-right: 10%;
		padding-top: 120px;
		span{
			color: #ffffff;
			font-size: 24px;
		}
		p{
			color: rgba(255, 255, 255, 0.8);
			font-size: 14px;
			line-height: 1.6;
			margin-top: 50px;
		}
	}
	img{
		width: 55%;
	}
}


.system{
	padding: 30px 0;
}

.sys-tab{
	margin-top: 40px;
	.sys-header{
		background-color: #212B42;
		color: #fff;
		font-size: 20px;
		padding: 12px 36px;
		border-radius: 8px 8px 0 0;
	}
	.sys-table{
		display: flex;
		border-bottom: 1px solid #eeeeee;
		div{
			flex: 2;
			padding: 12px 36px;
			border-right: 1px solid #eeeeee;	
			font-size: 16px;
			color: #071D3C;
			&:nth-child(1){
				flex: 1;
				border-left: 1px solid #eeeeee;	
			}
		}
	}
}

@media only screen and (max-width: 1440px) {
	.battle{
		.bat-right{
			transform: scale(0.8);
			right: -200px;
		}
	}
}

@media only screen and (max-width: 750px) {
	.ext-title{
		font-size: 0.2rem ;
		text-align: center;
		color: #071D3C;
		position: relative;
		line-height: 2;
		&::after{
			content: '';
			display: block;
			width: 0.4rem;
			height: 0.04rem;
			background-color: #2FCEFF;
			position: absolute;
			bottom: 0;
			left:calc((100% - 0.4rem) / 2) ;
		}
	}
	
	.service{
		padding: 0.4rem 0;
		.seritem{
			display: block;
			margin-top: 0.2rem;
		}
		.ser-list{
			flex: 1;
			display: block;
			text-align: center;
			padding: 0.1rem 0.2rem;
			border-radius: 0.08rem;
			margin: 0.1rem 0.2rem;
			img{
				width: 0.5rem;
				margin-right: 0;
			}
			span{
				font-size: 0.18rem;
			}
			p{
				margin-top: 0.1rem;
				font-size: 0.12rem ;
			}
		}
		.ser-list:nth-child(2){
			margin: 0.1rem 0.2rem;
		}
	}
	
	
	.battle{
		height: 3rem;
		position: relative;
		&::after{
			display: none;
		}
		.warp{
			padding-left: 0.2rem;
			img{
				width: 0.5rem;
			}
		}
		.ext-title{
			margin-top: 0.1rem;
			text-align: left;
			&::after{
				left:0;
			}
		}
		.bat-right{
			position: relative;
			top: 0rem;
			right: 0;
			z-index: 999;
			width:100%;
			overflow: hidden;
			transform: scale(1);
		}
		.el-carousel{
			// overflow: visible;
			padding-left: 0rem;
			margin-top: 0.2rem;
			.el-carousel__container{
				height: 1.8rem;
				left: -10%;
			}
		}
		.el-carousel__item{
			width: 70%;
			height: 1.6rem;
			// background: linear-gradient(354deg, #FFFFFF 0%, #FDFFFF 0%, #EDFBFF 100%, #EDFBFF 100%);
			margin-right: 0rem;
			padding: 0.3rem 0.1rem 0.1rem;
			img{
				transition: all 0.3s ease-in 10ms;
			}
			span{
				color: #071D3C;
				font-size: 0.15rem;
				margin-left: 10px;
			}
			p{
				color: #69778A;
				font-size: 0.12rem;
				line-height: 1.6;
				margin-top: 10px;
			}
		}
		.el-carousel__arrow{
			opacity: 0.7;
			z-index: 99999;
			width: 0.3rem;
			height: 0.3rem;
			transition: all 0.3s ease-in 10ms;
			i{
				display: none;
			}
		}
		.el-carousel__arrow:hover{
			opacity: 1;
		}
		.el-carousel__arrow--left{
			top: 92%;
			left: 50%;
			background: url(../img/icon/icon_left.png) no-repeat center / 100% 100%;
		}
		.el-carousel__arrow--right{
			top: 92%;
			left: calc(50% + 0.3rem);
			background: url(../img/icon/icon_right.png) no-repeat center / 100% 100%;
		}
		.el-carousel__indicators{
			display: none;
		}
	}
	
	.introduce{
		padding: 0.3rem 0.1rem;
		.warp{
			display: block;
		}
		.int-img{
			width: 100%;
		}
		.int-cont{
			margin-top: 0.1rem;
			margin-left: 0;
			p{
				font-size: 0.13rem;
				color: #69778A;
				line-height: 1.8;
				margin-top: 0.15rem;
			}
		}
	}
	
	.technology{
		.warp{
			display: block;
		}
		padding: 0.1rem 0.1rem;
		background: linear-gradient(360deg, rgba(234, 239, 249, 0.4) 0%, rgba(203, 217, 246, 0) 100%);
		background-image: url(../img/pic/ext_12.svg) no-repeat;
		
		// background-size: 100% 100%;
		background-position: left bottom 0;
		.tec-left{
			flex: 1;
			margin-top: 0.1rem;
			.ext-title{
				margin-top: 0px;
				text-align: left;
				&::after{
					left:0;
				}
			}
			p{
				width: 100%;
				font-size: 0.13rem;
				color: #69778A;
				line-height: 1.8;
				margin-top: 0.18rem;
			}
		}
		.tec-right{
			flex: 1;
			height: 4.2rem;
			position: relative;
			margin-top: 0.2rem;
			.tec-right-item{
				position: absolute;
				width: 90%;
				display: flex;
				img{
					width: 0.6rem;
					margin-right: 0.12rem;
				}
				span{
					font-size: 0.14rem;
				}
				p{
					font-size: 0.11rem;
					line-height: 1.6;
					margin-top: 10px;
				}
			}
			
			.tec-right-item:hover{
				img{
					transform: rotateY(180deg)
				}
			}
			.tec-right-item1{
				left: 0;
				top: 0;
				height: 2rem;
				padding: 20px 30px 20px 20px;
			    z-index: 9;
			}
			.tec-right-item2{
				z-index: 8;
				bottom: 0.3rem;
				right: 0;
				height: 2.4rem;
				padding: 70px 40px 20px 20px;
			}
			
		}
	}
	
	.core-top{
		padding-top: 0.3rem;
	}
	.core-tab{
		margin-top: 0.24rem;
		.tab-list{
			margin: 0.08rem 0.08rem;
			font-size: 0.1rem;
			.core-img{
				width: 0.4rem;
				height: 0.4rem;
				border-radius: 0.24rem;
				border: 3px solid #fff;
				margin-bottom: 10px;
			}
		}
		.tab-active{
			&::after{
				border: 0.05rem solid transparent;
				border-bottom: 0.05rem solid #14192A;
				bottom: -0.08rem;
				left: 0.15rem;
			}
		}
	}
	.bottom-core{
		padding: 30px 0;
		.warp {
			display: block;
			padding: 0 0.1rem;
		}
		.cont{
			width: 100%;
			margin-right: 10%;
			padding-top: 0.1rem;
			span{
				font-size: 0.18rem;
			}
			p{
				font-size: 0.13rem;
				margin-top: 0.26rem;
			}
		}
		img{
			margin-top: 0.2rem;
			width: 100%;
		}
	}
	
	
	.system{
		padding: 0.1rem;
	}
	
	.sys-tab{
		margin-top: 0.2rem;
		.sys-header{
			font-size: 0.16rem;
			padding: 0.1rem 0.2rem;
			border-radius: 0.08rem 0.08rem 0 0;
		}
		.sys-table{
			div{
				flex: 2;
				padding: 0.1rem 0.2rem;
				font-size: 0.12rem;
			}
		}
	}
}